<template>
  <div class="detailStyle">
    <div class="pro_content">
    <div class="header">
        <div>
          <img src="../../assets/2.jpg">
        </div>
      <div>

        <div>
          {{project.name}}
        </div>
        <div style="display: block;width: 100%;">
          技术要求：<span v-for="(item,i) in project.developer" :key="i">
          {{item}}
        </span>
        </div>
        <div>类型：{{project.type}}</div>
        <div>总天数：{{project.cycle}}</div>
        <div>金额：{{project.money}}</div>
        <div>时间：{{project.startTime}}</div>
        <div>投票人数：{{project.applicantspeo}}</div>
        <div>状态：{{project.state==1?'发布中':'已审核'}}</div>
        <div><el-button @click="readeyfun">选择投标</el-button>
        </div>
      </div>
      </div>

    <div class="content">
      <div>项目内容：</div>
    {{project.content}}
    </div>
    <div class="footer">

    </div>
  </div>
  </div>
</template>
<script>
  export default {
    created() {
      console.log(1111,'creeated')
    },
    data(){
      return{
       project:{name:'百度网盘 好友发送指定 关键字 匹配正确后，分享指定文件给他',developer:['java','c++'],type:'web网页',cycle:'45天',money:1000,startTime:'2个小时前',applicantspeo:10,state:1,content:'111'}
      }
    },
    methods:{
      readeyfun(){
        console.log(555)
      }
    }
  }
</script>
<style lang="less" scoped>
  .detailStyle{
    width: 100%;
    background-color: rgb(240, 242, 245);
    .pro_content{
      width: 95%;
      margin: 0 auto;
      .header{
        width: 100%;
        background-color: white;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 10px;
        height: 400px;
        display: flex;
        /*flex-wrap: wrap;*/
        align-items: center;

        >div:first-child{
          width: 50%;
          height: 80%;
          img{
            width: 100%;
            height: 100%;
          }
        }
       >div:nth-of-type(2){
          flex: 1;
          margin-left: 2%;
          height: 80%;
         position: relative;
          /*background-color: skyblue;*/
         div{
           width: 40%;
           display: inline-block;
           font-size: 16px;
           height: 30px;
           text-align: left;
            margin-top: 5px;
           /*display: flex;*/
           /*background-color: forestgreen;*/
         }
         >div:nth-of-type(1){
           width: 100%;
           height: auto;
           font-size: 18px;
           margin-bottom: 10px;
           font-weight: 900;
           font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "\5FAE\8F6F\96C5\9ED1", Arial, sans-serif;
           text-align: left;
         }
         >div:last-of-type{
           position: absolute;
           width: 60%;
           height: 40px;
           right: 50%;
           transform: translate(50%);
           bottom: 0;
           .el-button{
             width: 100%;
           }
         }
        }
      }
    }
  }
.content{
  background-color: white;
  margin-top: 10px;
  height: 400px;
  border-radius: 10px;
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
}

</style>
